<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/view.css}"/>
    <title>用户充值中心</title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <form id="userForm" th:action="@{/alipay/pay}" class="layui-form layui-card-body">
                  <input type="hidden" name="id" th:value="${user.id}">
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 150px;">请输入充值金额：</label>
                      <input type="text" name="balance" placeholder="请输入10的整数倍"  autocomplete="off" class="layui-input" style="width: 200px;">
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 150px;">选择支付方式：</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="button" name="wechart" style="background-color: #009900;color: white;border-radius: 5px;width: 130px;font-size: 20px;" onclick="wechatchange()" value="微信支付" ></input>
                      <!--  <input type="button" style="background-color: #1E9FFF;color: white;border-radius: 5px;width: 130px;font-size: 20px;" onclick="zfbchange()" value="支付宝支付" ></input>-->
                        <input type="submit" style="background-color: #1E9FFF;color: white;border-radius: 5px;width: 130px;font-size: 20px;"  value="支付宝支付" ></input>
                        <div id="wechat" style="text-align: center;margin-top: 10px; display: none;" >
                            <img th:src="@{/images/wechat.png}" style="width:200px;height: 200px;" />
                        </div>

                        <div id="zfb" style="text-align: center;margin-top: 10px; display: block;" >
                            <img th:src="@{/images/zfb.png}" style="width:200px;height: 200px;" />
                        </div>
                    </div>
                  </div>


                  <div class="layui-form-item">
                    <div class="layui-input-block" style="width:300px;margin-left:200px;">
                      <input type="button" class="layui-btn layui-btn-blue" lay-submit lay-filter="save" th:value="完成"></input>
                      <button type="reset" class="layui-btn layui-btn-primary"  style="margin-left:30px;">重置</button>
                    </div>
                  </div>
                </form>  
            </div>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/css/layui/layui.all.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
        var userId = [[${user.id}]];
        /*]]>*/
    </script>
    <script type="text/javascript">
        layui.use(['form'], function() {
            var form = layui.form
                , layer = layui.layer;

            //添加验证规则
            form.verify({
                balance : function (value,item) {
                    if(value == null){
                        return "充值金额不能为空！";
                    }
                }
            });

            //监听提交
            form.on('submit(save)', function(data){
               // var test = parent.location.pathname;
                var data = $("#userForm").serialize();
                $.ajax({
                    url: contextPath + "/userCenter/rechargeSubmit",
                    type: "post",
                    data: data,
                    success: function (msg) {
                        layer.msg("充值成功",{
                            time:1000
                        },function () {
                            //关闭当前弹出层
                            var index=parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.location.reload();
                        });
                    }
                });
            })
        });


    </script>
    <!--//切换支付方式-->
    <script type="text/javascript">

        function wechatchange(){
            document.getElementById("wechat").style.display="block";
            document.getElementById("zfb").style.display="none";
        }
        function zfbchange(){
            document.getElementById("wechat").style.display="none";
            document.getElementById("zfb").style.display="block";
        }


    </script>
</body>
</html>